<template>
<el-row class="right">
    <el-row class="invoice">
        <el-row class="row info">
            <div class="invoice-row l">
            <span>{{orderData.dep_date}}</span>
            <b>{{orderData.dep_time}}</b>
            <em>{{orderData.org_airport_name}}{{orderData.org_airport_quay}}</em>
            </div>
            <div class="invoice-row c">
            <div class="duration">
                <span v-if="orderData.arr_time">--- {{duration}} ---</span>
                <em>{{orderData.airline_name}}{{orderData.flight_no}}</em>
            </div>
            </div>
            <div class="invoice-row r">
            <span>{{orderData.org_city_name}} - {{orderData.dst_city_name}}</span>
            <b>{{orderData.arr_time}}</b>
            <em>{{orderData.dst_airport_name}}{{orderData.dst_airport_quay}}</em>
            </div>
        </el-row>
        <el-row class="row col-header">
            <el-col :span="8">订单总价</el-col>
            <el-col :span="8">金额</el-col>
            <el-col :span="8">数量</el-col>
        </el-row>
        <el-row class="row person-ticket">
            <el-col :span="8">成人机票</el-col>
            <el-col :span="8" v-if="orderData.seat_infos">￥{{orderData.seat_infos.org_settle_price}}</el-col>
            <el-col :span="8" v-if="personNum">x{{personNum}}</el-col>
        </el-row>
        <el-row class="row build-oil">
            <el-col :span="8">机建＋燃油</el-col>
            <el-col :span="8">¥{{orderData.airport_tax_audlet}}/人/单程</el-col>
            <el-col :span="8" v-if="personNum">x{{personNum}}</el-col>
        </el-row>
        <el-row class="row total">
            <el-col :span="12">应付总额：</el-col>
            <el-col :span="12" v-if="totalPrice">￥{{totalPrice}}</el-col>
        </el-row>
        </el-row>
    </el-row>
</template>

<script>
export default {
  props:{
     orderData:{
       type:Object,
       default(){
         return {};
       },
     },
     totalPrice:Number,
     personNum:Number
  },
  data(){
    return{
      
    }
  },
  computed:{
      duration(){
          // 1. 先转为分钟
          let arrArr = this.orderData.arr_time.split(':');
          let arrMint = Number(arrArr[0])*60 + Number(arrArr[1]);

          let depArr = this.orderData.dep_time.split(':');
          let depMint = Number(depArr[0])*60 + Number(depArr[1]);

          let diffMint = arrMint - depMint;

          // 对于跨越凌晨的航班来说, 由于刚好零点的时间计算有出入, 会少了 24 小时, 变成负数, 
          // 一旦发现负数, 就重新加上 24 小时即可
          if(diffMint < 0){
              diffMint += 24*60;
          }
          return Math.floor(diffMint/60) + '时' + diffMint % 60 + '分';
      }
  }
}
</script>

<style lang="less" scoped>
.right{
    width: 354px;
    .invoice{
        width:100%;
        height: 292px;
        box-sizing: border-box;
        border:1px solid #DDDDDD;
        .row{
          padding:0 14px;
          &:nth-child(-n+4){
            border-bottom:1px dashed #DDDDDD;
          }
          &:nth-last-child(-n+4){
            font-size:14px;
            color: #666666; 
          }
          &:not(:first-child):not(:last-child){
            height: 38px;
            line-height: 38px;
          }
          &:last-child{
            line-height: 64px;
            .el-col{
              &:last-child{
                font-size: 28px;
                color: #FFA000;
              }
            }
          }
          .el-col{
            &:nth-child(2n){
              text-align: center;
            }
            &:last-child{
              text-align: right;
            }
          }
        }
        .info{
           display: flex;
           box-sizing: border-box;
           width:100%;
           height: 111px;
           padding:20px 14px 14px;
           .invoice-row{
             display: flex;
             box-sizing: border-box;
             width:100%;
             height:100%;
           }
           .l{
             display: flex;
             flex-direction: column;
             width:80px;
             height:100%;
             span{
               color: #000000;
               font-size: 15px;
             }
             b{
               margin:8px 0 3px;
               font-size: 22px;
               color: #000000;
               font-weight: 450;
             }
             em{
               font-size: 12px;
               color: #999999;
               font-style: normal;
             }
           }
           .c{
              flex:1;
              text-align: center;
              .duration{
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                margin:0 auto;
                width: 90px;
                height:100%;
                span{
                  font-size: 12px;
                  color: #999999;
                }
                em{
                  margin-bottom: 5px;
                  font-size: 12px;
                  color: #999999;
                  font-style: normal;
                }
              }
           }
           .r{
             display: flex;
             flex-direction: column;
             width:80px;
             height:100%;
             span{
               color: #000000;
               font-size: 15px;
             }
             b{
               margin:8px 0 3px;
               font-size: 22px;
               color: #000000;
               font-weight: 450;
             }
             em{
               font-size: 12px;
               color: #999999;
               font-style: normal;
             }
           }
        } 
    }
}
</style>